<script setup lang='ts'>
       import axios,{type AxiosResponse} from 'axios'
       import {onMounted , ref} from 'vue';
       type BannerList = {
        imgUrl: string
       }[]
       interface Result{
        code:string,
        msg:string,
        result:BannerList
       }
       const list = ref<BannerList>([])     
         // 获取轮播图数据
 const getBanner = async () => {
  const res = await axios.get<null, AxiosResponse<Result>>("https://meikou-api.itheima.net/home/banner")
   list.value = res.data.result
 }
//  挂载周期
onMounted(() => {
  getBanner()
})
</script>
       
<template>
       <div class="container"> 
        <!-- 循环生成谁 就在谁的上面写v-for -->
        <img v-for = "(item,index) in list" :src="item.imgUrl" alt="">
       </div>
</template>
       
<style scoped>
       .container {
              width: 100%;
              height: 200px;
       }
       .container img {
        width: 300px;
        height: 100%;
        margin: 10px 20px;
     }
</style>